<template>
    <div>
        <img :src="picture" class="goods-Detail-picture">

        <div style="background: white">
            <div>
                <div class="goods-item-description">{{description}}</div>
                <div class="goods-item-stock">库存{{stock_num}}</div>
                <div class="goods-item-seller">卖家：{{seller}}</div>
                <div class="goods-item-price">￥{{price}}</div>
            </div>

            <div class="goods-item-button">
                <van-goods-action>
                    <van-goods-action-icon icon="chat-o" text="客服" @click="onClickIconKeFu"/>
                   <!-- <van-goods-action-icon icon="cart-o" text="购物车" @click="onClickIconToCart"/>-->
                  <!--  <van-goods-action-button
                            type="warning"
                            text="加入购物车"
                            @click="onClickButtonAddToCart"
                    />-->
                    <van-goods-action-button
                            type="danger"
                            text="立即购买"
                            @click="toOrderSubmit"
                    />
                </van-goods-action>
            </div>

        </div>

    </div>
</template>

<script>
    import Vue from 'vue';
    import { Sku } from 'vant';

    import {Toast} from 'vant';

    import {GoodsAction, GoodsActionIcon, GoodsActionButton} from 'vant';
    import {ApiService} from "../../axios/apiService";
    Vue.use(Sku);
    Vue.use(GoodsAction);
    Vue.use(GoodsActionButton);
    Vue.use(GoodsActionIcon);
    const goodsMessage = new ApiService("/GoodsDetails")
    export default {
        name: "goodsDetail",
        mounted() {
            this.getGoodsMessage();
        },
        data() {

            return {
                goodsId:"",
                picture: "https://img14.360buyimg.com/n0/jfs/t1/118240/27/5634/117364/5eb4ce96E09e88f5e/90b1886cf260b3a9.jpg",
                description: "台派 狗粮20KG40斤装泰迪金毛萨摩拉布拉多成犬幼犬小型中型大型犬通用型",
                classification: "狗粮",
                price: 109.00,
                seller: "商城自营",
                stock_num: 100,

            }
        },
        methods: {
            toOrderSubmit(){//立即购买
                console.log("立即购买 跳转到订单提交界面")
                var goodsId = this.$route.params.goodsId;
                const  test = new ApiService();
                console.log("用户id:"+test.getCookie("userid"))
                if(test.getCookie("userid")){
                    this.$router.push({name:"OrderSubmit",params:{goodsId}})
                }else{
                    Toast("您还没有登录！")

                }

            },
            onClickIconToCart(){
                this.$router.push({name: "OrderSubmit"})
            },
            getGoodsMessage(){
              var goodsId = this.$route.params.goodsId;
              this.goodsId = goodsId;
              goodsMessage.getViewById(goodsId).then(res=>{

                  this.picture = res.data.pictureUrl;
                  this.description = res.data.description;
                  this.price = res.data.price;
                  this.seller = res.data.sellerName;
                  this.stock_num = res.data.stockNum;
              })

            },

            onClickIcon() {
                Toast('点击图标');
            },
            onClickButton() {
                Toast('点击按钮');
            },
            onClickIconKeFu() {
                Toast('客服电话：18382985317');
            },
            onClickButtonBuyNow(){
                this.$router.push({name: "OrderSubmit"})
            }
        }

    }
</script>

<style scoped>

    .goods-item-seller{
        margin-top: 1px;
    }
    .goods-item-button {
        position: fixed;
        bottom: 50px;
    }

    .goods-Detail-picture {
        width: 100%;
        margin-bottom: -19px;
    }

    .goods-item-price {
        color: firebrick;
        font-size: 20px;
        margin-top: 1px;
        font-weight: 600;
    }

    .goods-item-stock {
        color: black;
        font-size: 15px;
        font-weight: 400;
        margin-top: 1px;

    }

    .goods-item-description {
        color: black;
        font-weight: 800;
        font-size: 17px;
        margin-top: 10px;
    }
</style>